<template>
  <div>
    <el-collapse accordion style="margin-bottom: 10px">
      <el-collapse-item>
        <template #title> 筛选 </template>
        <div class="filterSelect">
          <div>
            <el-select v-model="state.filterValue" placeholder="请选择">
              <template #prefix>
                城市：
              </template>
              <el-option
                v-for="item in state.filterCities"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.value
                }}</span>
              </el-option>
            </el-select>
            <svg-icon icon-class="closeTag" class="close" @click="handleClose" />
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
    // 筛选
    const state = reactive({
      filterCities: [
        {
          value: 'Beijing',
          label: '北京'
        },
        {
          value: 'Shanghai',
          label: '上海'
        },
        {
          value: 'Nanjing',
          label: '南京'
        },
        {
          value: 'Chengdu',
          label: '成都'
        },
        {
          value: 'Shenzhen',
          label: '深圳'
        },
        {
          value: 'Guangzhou',
          label: '广州'
        }
      ],
      filterValue: ''
    })
    const handleClose = () => {
      console.log(1)
    }


</script>
<style scoped>
::v-deep(.el-input--prefix .el-input__inner){
      padding-left: 75px !important;
}
</style>
<style lang="scss" scoped>
::v-deep(.el-collapse-item__content) {
  padding: 9px 0;
}

.filterSelect {
  display: inline-block;
  position: relative;
  height: 45px;
  width: 189px;
  margin-right: 20px;

  .close {
    font-size: 18px;
    position: absolute;
    top: -9px;
    right: 0px;
  }
}
</style>
